<template>
	<view>
		<view class="content">
			<!-- 计划相关 -->
			<view class="module_item">
				<view class="module_item_title">计划相关</view>
				
				<view class="normal_item">
					<view class="normal_item_title">如何设置计划的进度？</view>
					<view class="normal_item_main">长按计划截至时间即可设置计划进度，快去试试吧！</view>
				</view>
				
				<view class="normal_item">
					<view class="normal_item_title">如何设置计划标签？</view>
					<view class="normal_item_main">首页左上角点击文字或图标唤出侧边菜单，再点击标签管理进行设置就可以啦</view>
				</view>
			</view>

			<!-- 账号相关 -->
			<view class="module_item">
				<view class="module_item_title">账户相关</view>
				
				<view class="normal_item">
					<view class="normal_item_title">如何更换用户头像？</view>
					<view class="normal_item_main">在设置页点击用户头像即可从相册或摄像头拍摄一张图片作为自定义头像，大小不超过10M</view>
				</view>
				
				<view class="normal_item">
					<view class="normal_item_title">签到等级说明</view>
					<!-- 等级表格部分 -->
					<t-table border="0" border-color="#95b99e">
						<t-tr font-size="14" color="#617FDE" align="left">
							<t-th align="left">累计签到天数</t-th>
							<t-th align="left">对应账号等级</t-th>

						</t-tr>
						<t-tr font-size="12" color="#5d6f61" align="right" v-for="item in levelTableList" >
							<t-td align="left">{{ item.section }}</t-td>
							<t-td align="left">{{ item.level }}</t-td>
							
						</t-tr>
					</t-table>
					
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	
	import { levelSection } from '@/global/js/level.js'

	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				levelSection,
				levelTableList: []
			};
		},
		onLoad() {
			this.getLevelTableList()
		},
		methods: {
			getLevelTableList() {
				this.levelTableList = [
					{
						section: `${this.levelSection[0]}~${this.levelSection[1]}`,
						level: 1
					},
					{
						section: `${this.levelSection[1]}~${this.levelSection[2]}`,
						level: 2
					},
					{
						section: `${this.levelSection[2]}~${this.levelSection[3]}`,
						level: 3
					},
					{
						section: `${this.levelSection[3]}~~`,
						level: 4
					},
				]
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.content {
		padding: 0 40rpx;

		.module_item {
			
			.module_item_title {
				font-size: 28rpx;
				margin: 50rpx 0 20rpx 0;
			}

			.normal_item {
				background-color: #EEF1FB;
				border-radius: 14rpx;
				padding: 30rpx 40rpx;
				margin-bottom: 30rpx;

				.normal_item_title {
					font-size: 30rpx;
					margin-bottom: 14rpx;
				}

				.normal_item_main {
					color: #808080;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
